<template>
  <el-dialog
    v-if="openDialog"
    :title="title"
    v-model="openDialog"
    width="30%"
    @close="onClose"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form ref="formRefs" :model="form" label-width="85px" :rules="rules">
      <el-form-item label="脱敏字段:" prop="fieldName">
        <el-select
          style="width: 240px"
          v-model="form.fieldName"
          placeholder="请选择"
        >
          <el-option
            v-for="item in fieldNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起始值:" prop="minValue">
        <el-input-number
          style="width: 240px"
          v-model.number="form.minValue"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="结束值:" prop="maxValue">
        <el-input-number
          style="width: 240px"
          v-model.number="form.maxValue"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="组件别名:" prop="comName">
        <el-input
          style="width: 240px"
          v-model="form.comName"
          placeholder="请输入"
        ></el-input>
        <p class="directions">
          说明：起始值和结束值：表示该字段从起始字段到结束字段进行加密，加密的数据无法查看
        </p>
      </el-form-item>
    </el-form>
    <template #footer class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="isOk">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="desensitization">
import { reactive, toRefs, watch } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  open: {
    type: Boolean,
    default: false,
  },
});
const { data, open } = toRefs(props);
const emit = defineEmits(['onClose', 'getData']);

let title = ref('');
let openDialog = ref(false);
const formRefs = ref(null);
const fieldNameList = ref([
  {
    label: '上报人姓名',
    value: 'name',
  },
  {
    label: '上报人电话',
    value: 'mobile',
  },
])
const desensitization = reactive({
  form: {},
  rules: {
    fieldName: {
      required: true,
      message: '请输入脱敏字段',
      tirgger: 'blur',
    },
    minValue: {
      type: 'number',
      required: true,
      message: '请输入起始值',
      tirgger: 'blur',
    },
    maxValue: {
      type: 'number',
      required: true,
      message: '请输入结束值',
      tirgger: 'blur',
    }
  }
})
let { form, rules } = toRefs(desensitization)

watch(
  data,
  (val) => {
    title.value = val.comName ? val.comName : val.comType;
  },
  { deep: true, immediate: true },
);
watch(
  open,
  (val) => {
    if (val) {
      form.value = JSON.parse(JSON.stringify(data.value));
      let comName = form.value.comName ? form.value.comName : form.value.comType;
      form.value.comName = comName;
    }
    openDialog.value = val;
  },
  {},
);

const onClose = () => {
  emit('onClose');
}
const isOk = () => {
  formRefs.value.validate((valid) => {
    if (valid) {
      form.value.comState = 1;
      emit('onClose');
      emit('getData', { ...form.value });
    }
  });
}
</script>
